﻿@charset "utf-8";
*, *:after, *:before {
  box-sizing: border-box;
}

.checkbox-switch {
  position: relative;
  display: inline-block;
  height: 31px;
}
.checkbox-switch:after, .checkbox-switch:before {
  font-family: FontAwesome;
  -webkit-font-feature-settings: normal;
     -moz-font-feature-settings: normal;
          font-feature-settings: normal;
  -webkit-font-kerning: auto;
     -moz-font-kerning: auto;
          font-kerning: auto;
  -webkit-font-language-override: normal;
     -moz-font-language-override: normal;
          font-language-override: normal;
  font-stretch: normal;
  font-style: normal;
  font-synthesis: weight style;
  font-variant: normal;
  font-weight: normal;
  text-rendering: auto;
}
.checkbox-switch label {
  width: 75px;
  height: 42px;
  background: #ccc;
  position: relative;
  display: inline-block;
  border-radius: 46px;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}
.checkbox-switch label:after {
  content: '';
  position: absolute;
  width: 50px;
  height: 50px;
  border-radius: 100%;
  left: 0;
  top: -5px;
  z-index: 2;
  background: #fff;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  -webkit-transition: 0.4s;
  transition: 0.4s;
}
.checkbox-switch input {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 30px;
  z-index: 5;
  opacity: 0;
  cursor: pointer;
}
.checkbox-switch input:hover + label:after {
  box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.2), 0 3px 8px 0 rgba(0, 0, 0, 0.15);
}
.checkbox-switch input:checked + label:after {
  left: 40px;
}
.model-switch .checkbox-switch:after {
  content: '禁用';
  font-family: Arial;
  position: absolute;
  color: #666;
  top: 7px;
  right: 15px;
}
.model-switch .checkbox-switch label {
  background: none;
  border: 3px solid #777;
  height: 30px;
  border-radius: 20px;
}
.model-switch .checkbox-switch label:after {
  text-align: center;
  content: '已启用';
  font-family: Arial;
  color: #fff;
  line-height: 22px;
  text-indent: 100px;
  background: #777;
  overflow: hidden;
  box-shadow: none;
  border-radius: 14px;
  -ms-transform: translateX(-50px);
  -webkit-transform: translateX(-50px);
  transform: translateX(-44px);
  -moz-transition: all 0.4s 0.2s, width 0.2s linear, text-indent 0.4s linear;
  -o-transition: all 0.4s 0.2s, width 0.2s linear, text-indent 0.4s linear;
  -webkit-transition: all 0.4s, width 0.2s linear, text-indent 0.4s linear;
  -webkit-transition-delay: 0.2s, 0s, 0s;
  -webkit-transition: all 0.4s 0.2s, width 0.2s linear, text-indent 0.4s linear;
          transition: all 0.4s 0.2s, width 0.2s linear, text-indent 0.4s linear;
  top: 1px;
  left: auto;/*sssssssssssss*/
  right: 2px;
  width: 22px;
  height: 22px;
}
.model-switch .checkbox-switch input:checked + label {
  border-color: #69b6ff;
}
.model-switch .checkbox-switch input:checked + label:after {
  background: #69b6ff;
  left: auto;
  -ms-transform: translateX(0px);
  -webkit-transform: translateX(0px);
  transform: translateX(0px);
  -moz-transition: all 0.4s, width 0.2s linear 0.4s, text-indent 0.3s linear 0.4s;
  -o-transition: all 0.4s, width 0.2s linear 0.4s, text-indent 0.3s linear 0.4s;
  -webkit-transition: all 0.4s, width 0.2s linear, text-indent 0.3s linear;
  -webkit-transition-delay: 0s, 0.4s, 0.4s;
  -webkit-transition: all 0.2s, width 0.2s linear 0.2s, text-indent 0.2s linear 0.4s;
          transition: all 0.2s, width 0.2s linear 0.2s, text-indent 0.2s linear 0.2s;
  width: 65px;
  text-indent: 0;
}
input[type=checkbox]{
  margin: 0px;
}
.model-switch{
  height: 31px;
}
